<template lang="pug">
.player
  video-player.vjs-custom-skin(
    ref='videoPlayer'
    :options='playerOptions'
    :playsinline='true'
    @play='onPlayerPlay($event)'
    @pause='onPlayerPause($event)'
    @ended='onPlayerEnded($event)'
    @loadeddata='onPlayerLoadeddata($event)'
    @waiting='onPlayerWaiting($event)'
    @playing='onPlayerPlaying($event)'
    @timeupdate='onPlayerTimeupdate($event)'
    @canplay='onPlayerCanplay($event)'
    @canplaythrough='onPlayerCanplaythrough($event)'
    @ready='playerReadied'
    @statechanged='playerStateChanged($event)'
    )

</template>

<script>
// custom skin css
// import "./player.css";
// import "swiper/swiper.scss";

// import "video.js/dist/video-js.css";
import { videoPlayer } from 'vue-video-player'
// require("vue-video-player/src/custom-theme.css");
import 'vue-video-player/src/custom-theme.css'
import 'video.js/dist/video-js.css'

export default {
  components: { videoPlayer },
  data() {
    return {
      // videojs options
      playerOptions: {
        height: '780',
        autoplay: true, //加载完成后是否自动播放
        preload: 'auto', //视频预加载
        LoadingSpinner: true,
        muted: false, //静音播放
        language: 'zh-CN',
        playbackRates: [0.7, 1.0, 1.5, 2.0], //播放倍速
        // fluid: true,
        sources: [
          {
            type: 'video/mp4',
            // mp4
            src: 'http://192.168.110.149:8888/uploads/file/weiya.mp4'  //所放置视频的url地址
            // webm
            // src: "https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm"
          }
        ],
        notSupportedMessage: '此视频暂无法播放，请稍后再试',

         //为false时不显示默认的控制按钮
        controlBar: {
          // captionsButton: true,
          // chaptersButton: true,
          // playbackRateMenuButton: true,
          // LiveDisplay: true,
          // timeDivider: true,
          // durationDisplay: true,
          // remainingTimeDisplay: false,
          // full screenToggle: true,
          // progressControl: true,
          // volumeMenuButton: {
          //   inline: true,
          //   vertical: true
          // }

          children: [
            { name: 'playToggle' }, // 播放按钮
            { name: 'currentTimeDisplay' }, // 当前已播放时间
            { name: 'progressControl' }, // 播放进度条
            { name: 'durationDisplay' }, // 总时间
            { name: 'timeDivider' },
            {
              // 倍数播放
              name: 'playbackRateMenuButton',
              inline: false,
              playbackRates: [0.5, 1, 1.5, 2, 2.5]
            },
            {
              name: 'volumePanel', // 音量控制
              inline: true // 不使用水平方式
            },
            { name: 'FullscreenToggle' } // 全屏
          ]
        },
        poster:
          'https://image-static.segmentfault.com/317/931/3179314346-5f61e47221e07'
      }
    }
  },
  computed: {
    player() {
      return this.$refs.videoPlayer.player
    }
  },
  mounted() {
    // console.log('this is current player instance object', this.player)
    setTimeout(() => {
      console.log('dynamic change options', this.player)

      // change src
      // this.playerOptions.sources[0].src = 'https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm';

      // change item
      // this.$set(this.playerOptions.sources, 0, {
      //   type: "video/mp4",
      //   src: 'https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm',
      // })

      // change array
      // this.playerOptions.sources = [{
      //   type: "video/mp4",
      //   src: 'https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm',
      // }]
      this.player.muted(false)
    }, 5000)
  },
  methods: {
    // listen event
    onPlayerPlay(player) {
      // console.log('player play!', player)
    },
    onPlayerPause(player) {
      // console.log('player pause!', player)
    },
    onPlayerEnded(player) {
      // console.log('player ended!', player)
    },
    onPlayerLoadeddata(player) {
      // console.log('player Loadeddata!', player)
    },
    onPlayerWaiting(player) {
      // console.log('player Waiting!', player)
    },
    onPlayerPlaying(player) {
      // console.log('player Playing!', player)
    },
    onPlayerTimeupdate(player) {
      // console.log('player Timeupdate!', player.currentTime())
    },
    onPlayerCanplay(player) {
      // console.log('player Canplay!', player)
    },
    onPlayerCanplaythrough(player) {
      // console.log('player Canplaythrough!', player)
    },

    // or listen state event
    playerStateChanged(playerCurrentState) {
      // console.log('player current update state', playerCurrentState)
    },

    // player is ready
    playerReadied(player) {
      // seek to 10s
      console.log('example player 1 readied', player)
      player.currentTime(10)
      // console.log('example 01: the player is readied', player)
    }
    
  }
}
</script>
